<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 在组件的标签中填入要替换slot占位的元素 -->
    <cpn><button>按钮</button></cpn>
    <cpn><span>我是span</span></cpn>
    <!-- 如果一次性填入多个替换的元素, 所有的替换元素都会进行替换 -->
    <cpn>
      <i>我是i</i>
      <p>我是替换的p</p>
      <span>我是替换的span</span>
    </cpn>

    <!-- 如果标签内没有填入要替换的slot占位的元素, slot会使用默认的元素替换 -->
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>我是h2</h2>
      <p>我是p</p>
      <!-- 在组件中使用solt标签占位 -->
      <!-- 在slot标签中填入默认的元素, 默认元素会在子组件标签没有填入替换的元素的时候显示出来 -->
      <slot><button>我是默认的按钮</button></slot>
    </div>
  </template>

  <script>
    const app = new Vue({
      el: "#app",
      components: {
        cpn: {
          template: "#cpn"
        }
      }
    })
  </script>
</body>

</html>